<template>
  <div class="layout-tabs">
    <el-scrollbar :height="50" class="layout-tabs-scrollbar">
      <div class="layout-tab-container">
        <div v-for="tab in global.tabs.list" :key="tab.code" class="layout-tab-item">
          <div
            :class="`layout-tab-bg ${global.tabs.default_active === tab.code ? 'activate' : ''}`"
            @click="openTabForTabs(tab)"
          >
            <div class="layout-tab-item-icon">
              <SvgIcon :name="tab.icon"></SvgIcon>
            </div>
            <div class="layout-tab-item-title">{{ tab.title }}</div>
            <div v-if="tab.closable" class="layout-tab-item-close">
              <el-button text circle size="small" @click.stop="onCloseTab(tab)">
                <SvgIcon name="close" :size="12"></SvgIcon>
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </el-scrollbar>
    <div class="layout-tabs-divider"></div>
  </div>
</template>

<script setup lang="ts">
import { inject } from 'vue';
import { GlobalState } from '@/renderer/global';
import SvgIcon from '@/renderer/components/icon/index.vue';
import { TabItemState } from '@/renderer/global/tabs';
import { useRouter } from 'vue-router';

const router = useRouter();
const global: GlobalState = inject('global') as GlobalState;

const openTabForTabs = (tab: TabItemState) => {
  global.openTabForTabs(tab, router);
};

const onCloseTab = (tab: TabItemState) => {
  global.onCloseTab(tab, router);
};
</script>
